<template>
	<view>
		<uni-section :title="listData.name" type="line"></uni-section>
		<uni-collapse ref="add" class="warp">
			<uni-collapse-item v-for="(sub, key) in listData.data" :key="key" :open="sub.open" :show-animation="sub.showAnimation" :title="sub.subName">
				<text class="content">{{ sub.content }}</text>
				<text class="content" v-if="sub.subContent">{{ sub.subContent }}</text>
			</uni-collapse-item>
		</uni-collapse>
		<button type="default" class="setting-btn">意见反馈</button>
	</view>
</template>

<script>
	import uniCollapse from '@/components/common/uni-collapse/uni-collapse.vue'
	import uniCollapseItem from '@/components/common/uni-collapse-item/uni-collapse-item.vue'
	import uniSection from '@/components/common/uni-section/uni-section.vue'
	export default{
		data(){
			return{
				listData:{
					name: '常见问题反馈',
					data: [{
						type: true,
						subName: '客服什么时候在线？',
						showAnimation: true,
						content: '亲爱的糗友，客服的工作时间为：周一到周六10：00-12：00，14：00-19：00，非工作时间的咨询的反馈会自动转为留言，客服上班后第一时间会回复哦~。',
						subContent:'PS.紧急问题可以加官方qq进行反馈'
					},
					{
						type: true,
						subName: '忘记账号/昵称/密码怎么办？',
						showAnimation: true,
						content: '折叠内容主体，这是一段比较长内容。默认折叠主要内容，只显示当前项标题。点击标题展开，才能看到这段问题。再次点击标题，折叠内容。'
					},
					{
						type: true,
						subName: '怎么搜查/查找、关注/取关用户',
						showAnimation: true,
						content: '折叠内容主体，这是一段比较长内容。默认折叠主要内容，只显示当前项标题。点击标题展开，才能看到这段问题。再次点击标题，折叠内容。'
					},
					]
				}
			}
		},
		components:{
			uniSection,
			uniCollapse,
			uniCollapseItem
		}
	}
</script>

<style>
	.content {
		padding: 15px;
		font-size: 14px;
		line-height: 20px;
		background-color: #f9f9f9;
		color: #666;
	}
	.setting-btn{
		background-color: #FFE933;
		margin: 0 20upx;
		margin-top: 50upx;
	}
</style>
